<template>
    <div class="container" id="container">
        <div class="page">
            <div class="page__bd" style="height: 100%;">
                <div class="weui-tab">
                    <div class="weui-tab__panel">
                        <transition name='slide-fade'>
                            <router-view></router-view>
                        </transition>
                    </div>
                    <div class="weui-tabbar">
                        <a href="javascript:;" v-bind:class="[CurrentPage=='MainPage' ? 'weui-bar__item_on' : '','weui-tabbar__item']" v-on:click="gotoMain">
                            <span style="display: inline-block;position: relative;">
                                <svg class="icon " aria-hidden="true" style='width: 25px;height: 25px;' v-bind:class="[CurrentPage=='MainPage' ? 'green' : 'green2']">
                                    <use xlink:href="#icon-zhuye"></use>
                                </svg>
                            </span>
                            <p class="weui-tabbar__label">主页</p>
                        </a>
                        <a href="javascript:;" v-bind:class="[CurrentPage=='MyPage' ? 'weui-bar__item_on' : '','weui-tabbar__item']" v-on:click="gotoMy">
                            <span style="display: inline-block;position: relative;">
                                <svg class="icon " aria-hidden="true" style='width: 25px;height:25px;'  v-bind:class="[CurrentPage=='MyPage' ? 'green' : 'green2']">
                                    <use xlink:href="#icon-wode-wode"></use>
                                </svg>
                            </span>
                            <p class="weui-tabbar__label">我的</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data  () {
        return {
            CurrentPage:"MainPage"
        }
    },
    methods: {
        gotoMain (){
            if(this.CurrentPage!="MainPage"){
                this.CurrentPage="MainPage"
                this.$router.replace({ name: this.CurrentPage} );
            }            
        },
        gotoMy (){
            if(this.CurrentPage!="MyPage"){
                this.CurrentPage="MyPage"
                this.$router.replace({ name: this.CurrentPage} );
            }            
        }
    },
    created () {
        document.title="欢迎使用910医院在线服务";
        this.CurrentPage=this.$route.path.replace('/','')
    }
}
</script>

<style>

</style>